import React, {
    useCallback,
    useEffect,
    useLayoutEffect,
    useMemo,
    useState
} from "react";
import {connect, useDispatch} from "react-redux";
import intl from "react-intl-universal";
import {message} from "antd";
import moment from "moment";
import axiosMethod from "../../../../../../common/axios/index";
import Empty from "../../../../../../common/component/empty";
import { getRangeDate, getDateType, getDateWeek, constructionDate } from "../../../../../../common/util/index";
import "./index.scss";
import Scrollbars from "react-custom-scrollbars";

const timeLineList = [];
for(let i = 0; i <= 24; i++){
    timeLineList.push(`${i<10?"0"+i:i}:00`);
}

function MyScheduleWeek(props){
    let {
        changeCurrentType,
        scheduleList,
        userInfo,
        termInfo,
        getScheduleList
    } = props;

    const dispatch = useDispatch();
    const modalChange = useCallback((value)=>{   //控制日程弹窗显隐
        
        if(!value){
            dispatch({
                type: "SET_ADDSCHEDULEINFO",
                data: {
                    visible: value,
                    scheduleInfo: {
                        remindFlag: true,
                        remindType: 1,
                        remindTime: 30,
                        repeatTime: 0  
                    }
                }
            })
        } else {
            dispatch({
                type: "SET_ADDSCHEDULEINFO",
                data: {
                    visible: value
                }
            })
        }
    }, []);
    const operateSchedule = useCallback((data, type, allOrOneFlag)=>{  //操作日程
        type = type? type: data.scheduleId? "0": "1";
        allOrOneFlag = allOrOneFlag? allOrOneFlag: String(data.repeatTime) === "0"? "0": "1";
        if(type === -1){  //删除
            axiosMethod({
                type: "delete",
                url: "/api/schedule/manage/delete",
                body: {
                    eduId: userInfo.eduId,
                    userId: userInfo.userId,
                    userType: userInfo.userType,
                    scheduleId: data.scheduleId,
                    mainScheduleId: allOrOneFlag === "1"? data.mainScheduleId: "",
                    originalScheduleDate: data.scheduleDate
                },
                callback: function(res, result){
                    if(result.code !== "200"){
                        modalChange(false);
                        return;
                    }
                    message.success("删除成功");
                    modalChange(false);
                    getScheduleList();
                }
            });
            return;
        }
    }, [modalChange, userInfo, getScheduleList]);
    const editSchedule = useCallback((data)=>{
        axiosMethod({
            type: "get",
            // url: "/api/homepage/schedule/info/new/detail",
            url: "api/schedule/info/detail",
            body: {
                userId: userInfo.userId,
                userType: userInfo.userType,
                scheduleId: data.scheduleId,
                eduId: userInfo.eduId
            },
            callback: function(res){
                if(!res){
                    return;
                }
                res.repeatTime = res.repeatTime === "0"? 0: res.repeatTime;
                res.remindFlag = Number(res.remindFlag);
                res.beAllDay = Number(res.beAllDay);
                res.originalScheduleDate = res.scheduleDate;
                if(Array.isArray(res.repeatTimeList)){
                    res.repeatTimeList = res.repeatTimeList.map(item=>Number(item))
                }
                dispatch({
                    type: "SET_ADDSCHEDULEINFO",
                    data: {
                        visible: true,
                        scheduleInfo: res,
                        clickPosition: {}
                    } 
                })
            }
        });
    }, [userInfo]);
    const deleteSchedule = useCallback((data)=>{
        if(String(data.repeatTime) === "0"){
            dispatch({
                type: "SET_ALERTINFO",
                data: {
                    title: "是否确定删除该日程？",
                    visible: true,
                    onOk: function(){
                        operateSchedule(data, -1, "0");
                        dispatch({
                            type: "SET_ALERTINFO",
                            data: {
                                visible: false,
                                title: "",
                                smallTitle: "",
                                data: {},
                                onOk: ()=>{},
                                onCancel: ()=>{}
                            }
                        })
                    },
                    onCancel: function(){
                        dispatch({
                            type: "SET_ALERTINFO",
                            data: {
                                visible: false,
                                title: "",
                                smallTitle: "",
                                data: {},
                                onOk: ()=>{},
                                onCancel: ()=>{}
                            }
                        })
                    }
                }
            })
        } else {
            dispatch({
                type: "SET_ALERTINFO",
                data: {
                    title: "此为重复日程，是否删除？",
                    visible: true,
                    okText: "将来所有日程",
                    onOk: function(){
                        operateSchedule(data, -1, "1");
                        dispatch({
                            type: "SET_ALERTINFO",
                            data: {
                                visible: false,
                                title: "",
                                smallTitle: "",
                                data: {},
                                onOk: ()=>{},
                                onCancel: ()=>{}
                            }
                        })
                    },
                    cancelText: "单个日程",
                    onCancel: function(value){
                        if(value === "operate"){
                            operateSchedule(data, -1, "0");
                        }
                        dispatch({
                            type: "SET_ALERTINFO",
                            data: {
                                visible: false,
                                title: "",
                                smallTitle: "",
                                data: {},
                                onOk: ()=>{},
                                onCancel: ()=>{}
                            }
                        })
                    }
                }
            })
        }
        
    }, [dispatch, operateSchedule]);
    const changeCourse = useCallback((data)=>{
        window.open(
			sessionStorage.getItem("baseUrl") +
				`html/schedule#/teacher/mine?changeScheduleID=${data.scheduleId}`
		);
    }, []);
    // useLayoutEffect(()=>{   //把获取到的日程列表按日期整合进表格中
    //     console.log(scheduleList, "scheduleList");
    // }, [scheduleList]);
    return (
        <div className="type_day_container">
            <div className="container_left"></div>
            <Scrollbars style={{height: 490}}>
                {
                    Array.isArray(scheduleList) &&
                    scheduleList.length > 0?
                    scheduleList.map((item, index)=>{
                        return (
                            <div className="schedule_one" key={index}>
                                <span className="schedule_time">{item.startTime}-{item.endTime}</span>
                                <span className="underline">
                                    <span className={`schedule_sign ${
                                        (item.scheduleType === "2" || item.scheduleType === "0")?
                                        "course":
                                        // item.scheduleType === "3"?
                                        // "study":
                                        (item.scheduleType === "3" || item.scheduleType === "13")?
                                        "meeting":
                                        (item.scheduleType === "8" || item.scheduleType === "9")?
                                        "":
                                        "activity"
                                    }`}></span>
                                    <span className={`schedule_type ${
                                        (item.scheduleType === "2" || item.scheduleType === "0")?
                                        "course":
                                        // item.scheduleType === "3"?
                                        // "study":
                                        (item.scheduleType === "3" || item.scheduleType === "13")?
                                        "meeting":
                                        (item.scheduleType === "8" || item.scheduleType === "9")?
                                        "":
                                        "activity" 
                                    }`} title={item.scheduleMark}>{item.scheduleMark}</span>
                                    <span className="schedule_content" title={item.scheduleTitle||item.scheduleContent}>{item.scheduleTitle||item.scheduleContent}</span>
                                    {
                                        moment(item.scheduleDate+" "+item.endTime) < moment(constructionDate(""))?
                                        item.beCourse === "1"?
                                        "":
                                        <span className="btn_group">
                                            <span className="delete_btn" onClick={()=>deleteSchedule(item)}>删除</span>
                                        </span>:
                                        item.beCourse === "1"?
                                        <span className="schedule_btn">
                                            <span className="edit_btn" onClick={()=>changeCourse(item)}>换课</span>
                                        </span>:
                                        <span className="btn_group">
                                            <span className="edit_btn" onClick={()=>editSchedule(item)}>编辑</span>
                                            <span className="slice_line"></span>
                                            <span className="delete_btn" onClick={()=>deleteSchedule(item)}>删除</span>
                                        </span>
                                    }
                                </span>
                            </div>
                        )
                    }):
                    <Empty className="contentlogo" text="暂无日程" style={{marginTop: 100}} />
                }
                
            </Scrollbars>
        </div>
    )
}
const mapProps = (state) => {
    return {
        userInfo: state.userInfo,
        sysAddrInfo: state.sysAddrInfo,
        identityList: state.identityList,
        currentIdentity: state.currentIdentity,
        skinInfo: state.skinInfo,
        sysInfo: state.sysInfo,
        termInfo: state.termInfo
    }
}
export default connect(mapProps)(MyScheduleWeek);